Page text not visible until scrolling
jrladd opened this issue · comments
Are there any errors in the developer console? Can you provide more details, as well as screen width? There are some break points which I'd like to have in mind when debugging. What pages does this not occur on? What version of FF? What version of Ubuntu?
- https://cmu-lib.github.io/dhlg/local-resources/people/ loads ok in FF 56.0.2 and 69.0 on Windows 10
- FF 69.0 (64-bit) -- the default FF install through Ubuntu (i.e. not direct from Mozilla)
- Ubuntu 18.04.3
- screen size 1600x900
I'm not getting any errors in the console. On second look, the error only occurs at a specific browser width, between about 1145 and 1250 pixels. It doesn't occur on the homepage or on any pages that have a table of contents, like the Topics page. So it seems to be happening when a page has just one column of content?
I found at least one page, DH Community, where the content aligns to the left of the page instead of disappearing (then returns to the center again when I begin to scroll).
Hope that helps!
Ah, this is not browser or OS specific, the width was the key. The top nav logo was too large, and the left floating elements were getting trapped on layout. I've added new breakpoints to the CSS specifically for the logo, as well as altered the logo to just the icon / mark for the lowest width prior to the flip to mobile.
Fixed - please let me know if this remains an issue. I checked the other pages to see how it operates, looks good. If the single icon in these break points is a no-good, we'll need another solution
Unfortunately, this doesn't seem to fix the issue for me on continuous resize, and the shrinking icon looks somewhat odd. Now, for some reason, there are four different sliding widths (1200ish, 1160ish, 1130ish, 1110ish) on which this seems to break.
Shall we just drop the horizontal logo and the largest break point c. 1200ish, and go with the mark? I will make it resize-able.
I think it'd be a mistake to get rid of the logo, is there perhaps another way to do this? Perhaps collapse the nav bar at a wider resolution, rather than having the logo duck above the nav bar on resize? I think as long as it's in full view at 1280×960, we're fine if it collapses when it gets a bit narrower.
just emailed - makes sense to keep it here. The logo displays fine at screen sizes larger than 1196px. The issue is the space in between 1196px and 1010px. I can move up the break point for the mobile menu, if that's preferred.
@milnerm Let's move up the break point for mobile menu to 1196, then, that's a sacrifice I'm willing to make.
Ok, moved up the breakpoint only for the nav menu - it's at 74.063em, which is ~1185px or so with the current em setting
fixed the logo scaling. please let me know if it's good on your end.
Still getting the weird stacking effect around 1200px, can we get rid of that?
Aaand the pages are disappearing again around 1190px
The scaling solution changed the width of the containing element for the horizontal logo depending on the width. The left hand items are static due to the length of their text. The only flexibility we have is with the image to certain degree, but if it's fixed width the menu doesn't fit, hence the thought of using the mark. thoughts?
The scaling solution was also causing problems, noted above, so I'm not sure a way out of this. Give me a half hour, I'm going to try to fiddle with the menus.
Alright, I updated the nav menu to remove one menu item. Can you reset the mobile menu to as narrow as possible (hopefully at/under 1024 px), while avoiding the issues we've been noticing?
Ok pulling the latest here, and will reset to the original mobile breakpoint. I'm going to leave the new breakpoint in the code base however in case we want to go back. But let's test this out...
Going to push a version now, the breakpoint is at 1024px - at 1025px the logo is still visible, and operates correctly on my local. at 1024px we flip to mobile. there is no scaling of the logo
I am having issues with my local version of agile-development branch. I can't pull / fetch the latest master to it for some reason.
I've pushed to the master directly. hope that's ok
Unfortunately...
What page is this. I cannot replicate this. at 1025px I have the following for https://cmu-lib.github.io/dhlg/what-are-dh/
can you confirm that in the css the following is the case?
@media only screen and (min-width: 64.063em)
.top-bar-section>ul.right>li.logo {
width: 240px;
}
I have found that deployment takes a minute or two to refresh. also, can you ensure that the CSS is not drawing on the cache?
Fine in Chrome and FF, reproducible in Edge and Safari
I'm seeing "@media only screen and (min-width: 64.063em)" and ".top-bar-section>ul.right>li.logo{width: 240px}" at two separate sections in the CSS, but not in one chunk. I have cleared the cache and I'm still seeing an issue in chrome and firefox...
Just pushed again. the line in question is 1036 in style_feeling_responsive.scss - it's the width of the li.logo that is causing the problem (hence the earlier scaling solution).
It's now 230px. Can you confirm if the problem is occurring or not? It looks ok on my local, but we've been clearly getting some different results in FF and Chrome. The old problem was apparent in Opera and Edge, and is now gone.
!!!! IT WORKS !!!!!
THANK the powers above. sorry for the ridiculousness. if the error reappears like a zombie whackamole it is that line where we can slay the beast
awesome, thank you so much for such dogged efforts