Error rendering in WebKit browsers

Question

The project I'm working on now has a very strange rendering problem. The worst part is that this question arises completely spontaneously, and after several days of testing we were not able to find a sequence of actions that will reproduce this problem. Here is an explanation of what this error looks like. Here is a screenshot of how the page should look:

But instead, after some manipulations, a content block appears, so only a part of the content is visible, and it looks like this:

The strangest thing is that such a block position is not based on CSS property values, as shown in the Web Inspector.

As you can see, the CSS properties are fine, but the block position is not. This fact tells me that this may be some error displaying the WebKit engine

The project is built using Ext JS 3.4, and it is a classic single-page web application. This issue has been seen in recent versions of Chrome and Safari on Mac OS 10.7 / 10.8. Although due to the spontaneous nature of this problem, it may be present in other browsers and platforms.

Any advice on how to debug such problems or how they might arise is welcome.

Answer 1

Please check if any of the code or external JS code uses the scrollIntoView method, we saw a similar problem when scrollIntoView is called on any element that does not have an overflow set to auto, and it is inside the trimmed element, which is probably placed relatively positioned.

It seems to be a bug in webkit, because it scrolls the trim element, which does not happen in other browsers.

I also see two elements in the same hierarchy that have overflow set to auto. And scrollIntoView scrolls the wrong element.

Answer 2

Chrome and Safari on Mac have scrolling issues. If the item scrolls and the content changes, the scroll position is maintained, even if the content is not large enough to require scrolling.

The work we found in our application is to resize the container (one that has scroll) so that it has a scroll bar (otherwise you cannot play with the scroll properties), and then reset the scroll, and the height.

$(container).css('height',1).scrollTop('1').css('height',''); 

Here's how we do it in jQuery. You won’t even see the flicker :)

I'm not sure if this is a problem, but this thing kept us on our feet for a while.

Answer 3

i ran into the same problem when working with sencha touch 2 application and because, like ExtJS , I have a solution for you
this is probably an error in the structure, and this happens when ExtJS displays the application before the browser fills in the correct values ​​for window.innerWidth and window.innerHeight , and therefore the viewport cannot take the correct width and height. it also explains the randomness of the event. This becomes more noticeable when used on mobile phones, probably due to limited resources and a slow response.
the solution that I took to handle this mayba is not good, but I could not find a better one, given that this is a failure in the structure itself
i polling for the correct height and width browsers for about a second after every 100 ms for the correct height and width of the window, and if I find that the height or width of the viewport not the same, adjust it. because you work with ExtJS, and the application will run on high-power systems (compared to mobile phones), I would recommend a shorter interval and then be safe for the longer period of time for which it polled. heres the code I'm currently using to suit your needs

 var aId = setInterval(function () { if (Ext.Viewport.getWidth() !== window.innerWidth || Ext.Viewport.getHeight() !== window.innerHeight) { Ext.Viewport.setSize(window.innerWidth, window.innerHeight); clearInterval(aId); } num = num + 1; if (num > 10) { clearInterval(aId); } }, 100) 

I am currently using this code inside the launch function application. but you can also use this inside the show viewport event, for which you should keep a minimum time to avoid any delays.
with this, if you think that this application can be used on devices where the user can change the size and width of the window (for example, a mobile browser when changing orientation or if you think that the user will change the height and width browser window). then just copy and paste the same code snippet inside the resize event viewports so that it also polls and resizes the viewport when resizing the viewport.

Answer 4

You tried to add clarity: both; block after toolbar div?

 <div style="clear:both;"></div> 

Answer 5

@bjornd is pretty hard to debug without any code :)

Is the toolbar positioned and contains the contents of the identifier invoked in the url? In other words: is there any link (e.g.) that runs #content and does not have preventDefault() , etc.? Perhaps this will scroll the page.

I do not know, this was the first thing that came to mind.

There may also be toolbar content that (for some reason) is no longer being cleared or some change in the content top position (relative to another changed / deleted item?)

Try creating a truncated test file containing the simplest code, but still cause an error. If you publish this (for example, using Fiddle, etc.), we can look right.

Answer 6

This may be a css problem;

I had a similar problem using equal height divs by setting padding-bottom: 99999px; and margin-bottom: -99999px; . Which works fine in all cases, except when you use hashtag bindings to jump to a div further on the page. <a href="#someDivFurtherOnThePage">Jump down</a> .

In this case, the top of the page was cropped and started with the div I wanted to see.

Since you say that the problem is quite difficult to track, it may be something to look at. The solution was to remove these 2 lines of css and use a different way to set div heights.