I have some custom drop-down menues that are acting strange.
https://bohuslansmuseum.iplace.se/kunskapsbanken/
The drop-downs looks alright, til you start scrolling down. Then you'll notice that the
background starts flickering and behaving strangely. Also, when you hover over them they start flickering.
The problem is only visible on chromium based browsers, and I've tested it on both Mac and Windows. I've tested it in safari and firefox, and there they behave correctly.
If anyone has any idea to how I should tackle this would be greatly appreciated, I'm pretty lost to what to do, I've tried the basics with playing around with display background but I'm currently clueless.
Edit:
The problem remains even with overflow:auto. Have changed the title to match.
Related
I'm building a site for a client and man I'm having a hard time with CSS Scroll Snap in Chrome...
{{redacted URL}}
I'm using Chrome 109.0.5414.87 on OSX. After the intro animation (FYI I hate these but clients love them) you should see:
Scrolling from first red section into blue I see a flash
Scrolling from first red section into blue, often times it will almost get to blue, but then glitch back to red.
You can actually scroll UP past the top of the page
Works great on Firefox and even Safari (OMG).
All the issues seem to be related to going from first slide to the second.
I have noticed that the length of the scroll-handle seems to change when going from section 1 to 2, I have no idea why but perhaps that is related?
Any tips or help would be most welcomed!
OK looking into this now, I see that it was because I had an element (footer) at the bottom of the page that was toggling to display:none. Not sure why this should effect scroll snap, but I suppose it's because it is changing the length of the scrollbar and Chrome didn't like that.
This doesn't stop the scroll up issue (#3), but it does seems to solve all the visual glitches.
So for all future people: When using scroll-snap, make sure you aren't doing anything that might change the height of the page during scroll, Chrome doesn't like that. 100vh on mobile was another culprit of this.
I'm using rgba colors, but after switching to HEX the problem still persists. I never had this issue a few weeks ago, and just noticed it. All opacities on rgba colors are set to 1 (100%), so they should appear. I assume it's a new chrome bug?
The left screenshot is Safari where it works and the right is Chrome.
safari vs chrome link
Same to me. I found a fix! Aparently there is a bug with webkit with the backface of a div element. This code will help
-webkit-backface-visibility: hidden;
You can found more info in w3schools.com -> here
Chrome appears to have some rendering bugs. Especially after GPU Driver Updates or Chrome Updates. A friend of mine had them for months.
You could try tuo update your drivers but theres no guarantee it helps.
Same happens to me. I tried to download Chrome beta. The weird rectangles do not appear there but the background color still does not act as it is supposed to. You can take a look at my page - the blue background color magically changes itself as soon as the whole landing page disappears.
I am doing an animation with ScrollMagic and GreenSock's TimelineMax. The animation is suppose to go in a WordPress page. However the animation has some glitches when the page is open in Chrome. This problem does not occur in Safari and Firefox. I can't test for IE.
This is how the problem looks like:
And this is how it is suppose to look like:
The most bottom part with title Your web site goes up, and the two top parts move down. As I said, it works perfect on Safari and Firefox, but on Chrome you have to scroll up and down to fix the issue. However this is not acceptable for us, since the users of our page wont see the animation properly when they first scroll down.
Here is JSFiddle of the animation. Now, this will most probably work without problems in JSFiddle, but when I put this in WordPress page it looks like on the first image. Does anybody have a clue why this happens?
I found the solution :) I don't want to delete the question, because I hope somebody will find it useful.
The solution is to increase the z-index of all the elements (images, divs, everywhere where I have z-index in the css.). I increased it for 1000 on every element and it worked.
I'm having an issue with a scrollbar that doesn't scroll. Here is my web page (still under construction): http://www.personal.psu.edu/pzb4/zacs/
CSS file is at http://www.personal.psu.edu/pzb4/zacs/css/screen.css
The scrollbars work fine when tested in Chrome and Firefox. Safari seems to be the problem. When I click on the Depth of Field link, the scrollbar is inactive for some reason. I was having the same problem with the Exposure link, but once I fiddled with that and somehow got it working, the Depth of Field scrollbar stopped working! I didn't do anything to change that and it was working before. Scratching my head as to why this doesn't work right. Any help humbly appreciated.
I've got a strange display problem in Safari that I can't seem to pinpoint. The container block spacing is ignored, making page content overlap into the footer. But here's the strange thing: when I open the developer tools (working on a PC but have a safari version installed for testing and such) the container block suddenly "registers" and the spacing is correct, as intended.
Here's the URL: http://createwilmington.com
Any ideas? Seems I'm more adapt to debugging and expecting IE issues than Safari.
Clearing. That was the problem. A simple "clear: both" on the footer and "push" classes.
I had this code in my original reset,
[class*="site"]:after{content:'';display:table}
but this was breaking Safari (causing a completely white screen). As a reference for others, here's the question/answer