I took the HTML5 Boilerplate template and created a sample page that shows rendering bug in Safari on Mac OS http://random.net.ua/bug/
To reproduce the error:
Click "Open window"
Scroll to the bottom of the window
Click anywhere on the page
Scroll to the top
You will see something like this:
For me the site works fine, not like what your site looks like.
Perhaps try clearing your cookies/ history in order to make the change take effect on your computer?
Hope that helps. Also posting code can lead to a better answer :D
Related
I recognized this Bug on several Pages occurring in Chromium related browsers. I opened up a Chromium Issue, where the project members could not reproduce the problem - I am trying to figure out why this is happening (since the Problem occurs on Pages as like google.com, amazon.com, and so on, on several Mac-OS devices, which have nothing else in common) - we tried it on a clean Chrome installation, where The Problem is also occurring. To me it seems to be a bug - now I'd like to know if other people are also not able to reproduce. If you can reproduce (to reproduce read the following lines below) and/or find something new/interesting about the problem consider supporting the Ticket/Chromium Issue.
Chrome Version
91.0.4472.101 (Offizieller Build) (x86_64)
URLs tested
https://www.google.de/
https://www.microsoft.com/de-de
https://www.amazon.de/
Other browsers tested
Safari: hasn't the problem
Firefox: hasn't the problem
Edge: has the same issue (also Chromium based)
Chrome Canary: has the same issue (also Chromium based)
How to reproduce the problem?
Refresh Page (Command+Shift+R) and Scroll upwards while page is loading or in parallel (you have to be quick to reproduce).
What is the expected result?
Expectedly the Page should not over-scroll and stop at the pages top/end instead the page can be scrolled infinite above the pages top, same issue appears by scrolling down, where scrolling should stop at the bottom of the page.
What happens instead?
Browser keeps scrolling above the pages top/bottom infinitively. Once triggered the infinite scrolling wont disappear, even after refreshing the page - the only way to change the behavior is to copy the url and paste it within a new tab.
Small update: it seems like the problem appears when using a logitech mx master mouse (if you run into the problem when not using this specific model, let the chrome people know) - it looks like it can be solved by following steps:
Open a terminal window.
Type in the following command then hit enter:
defaults write -g NSScrollViewRubberbanding -bool false
Source: https://www.computerworld.com/article/2726533/turn-off-elastic-scrolling-in-os-x.html
Hopefully they'll fix the problem in chrome itself, until then this should solve the problem.
Update: See Irgend Son Hansel answer
I don't think there's an official fix currently, but what I do when this bug comes up is to simply click the scroll bar. It usually fixes it for a while before it comes back up again.
I am not entirely sure what the OP is asking but I assume they are looking for a fix or a workaround for this?
I occasionally experience the same on my MacOS machine. For me, refreshing page does not work. What I do is the following:
copy url of the current page
open new tab and navigate to the same url
close old tab
My responsive tools are messed up as shown in the picture. Does anyone know how to fix this without resetting everything?
It's not messed up. Looks like you have mistakenly clicked on "Toggle device tool bar". Click on that again and you will be back to normal.
I'm working on a hybrid app using Cordova, Bootstrap and Angular JS (1.3.x) and testing it in a Chrome desktop browser and on a Android device (lollipop, 5.0.2).
In a particular view, I open a modal window using ngDialog. The content in this dialog can exceed the height of a typical smartphone size, so vertical scrolling is required. And here comes the problem:
Most of the elements that should be displayed at the bottom of the dialog (out of initial sight) do not appear or don't getting rendered. When I blindly tap on the area where the disappeared interactive elements should be, they will get painted. When I then scroll up again, elements at the top disappear.
This behavior didn't exist on Android 4.4.
Now I'm able to reproduce this error on my Windows Chrome Browser (v43).
These are the steps:
Run this Plunkr http://embed.plnkr.co/VGYUe2i9vwsQZ21vc3LB/preview
Test with a recent Chrome Version
Make sure, this plunker is shown in embedded view (important)
Open Chrome developer tools
Click "Toggle device mode" (smartphone icon) (important)
Limit the vertical resolution to about 600px in height Click "open dialog" and scroll down to the bottom
Can you read "Hello, do you see me?" ?
If not, press on one of the panels on top or below the textbox, this
will cause a repaint and you can see the text.
This is how it looks:
Not OK -> No text in marked red boxes:
OK -> After clicks on it or browser tab switch
I found this article on postman blog, but the "fixer" does not seem to work in my case.
http://blog.getpostman.com/2015/01/23/ui-repaint-issue-on-chrome/
Can someone point me to the right direction?
I followed the instructions in the linked blogpost and those seem to work for me. Specifically, adding
-webkit-transform: translate3d(0,0,0);
to my CSS for ngDialog-content which has overflow-y: scroll.
Now the div scrolls on load for me.
The other good news is that at least my issue seems to be gone in Chrome Canary, so it may be worth seeing if the issue still exists for you there.
The page content in #main area is not showing up only on Chrome browser. But I can see the code is there when I view the page source. And when I click on the "inspect elements" or by clicking on any CSS style on the "inspect elements" popup, the content can just appear suddenly. Here is the page URL you can take a look on Chrome browser,
http://ssf-qa.uchicago.edu/Home.html
The version of the Chrome I'm using is,
Version 33.0.1750.146 m
And we have custom fonts on the page.
Thanks a lot!
I've seen this recently with Modernizr, which I see you have running on there too. If you remove the reference to modernizr it works right away! I think we just have to wait for a bug fix.
My webpage is rendering oddly in Chrome on a Mac. This is just below the fold of the page, but when I highlight the area it comes back into view, also if i use the "inspect element" it just shows the page as it should.
Its also not consistently, it only happens now and again.
Rendering Issue:
http://albertcrm.com/1.png
When I highlight:
http://albertcrm.com/2.png
I really have no idea how to even start debugging this, I guess its a CSS issue maybe, or a Chrome Rendering issue, maybe a JS include is taking to long to load?