skip navigation

« Previous post: Next post: »

Webkit height refresh bug

by Kai Chan Vong on

Update: If you actually specify a height & width on the image, the height does get added to the overall container height when webkit calculates it.

I’ve also decided to totally avoid keeping the background image for the graph paper on the actual div itself and put it on the container.
After reading more from the CSS-Tricks article mentioned this seemed like the most appropriate method for the job! While it makes the implementation a bit more abstract, using CSS means that it will work without JavaScript.

An hour ago I started trying to debug my portfolio page – the issue was around heights not being fully calculated by Chrome (I’m using javaScript to resolve the heights of the sidebar + the content lists). Only when you navigate away and back through links, can you see the proper height rendered to display all the content.

After much googling of the words “Chrome javascript refresh height” – I discovered other people with the same issues (here, here and here) – but it seemed that no one had linked up in their heads what was the real problem.

Then I started to hit Safari (it’s also a webkit browser) and realised my search arguments weren’t refined enough. Then bam! I’d found the blog post “is webKit too fast for it’s own good” which confirmed a suspicion.

The images in the content were not being taken into account for when webKit calculates the overall height of the container element and thus calculates minus all those god damned images. These are sad times if you have a combined image tower of webkit doom that equals 1000++ pixels and counting of invisable-ness.

I’m thinking of making webkit count the element height of all the images within the wrapper and have it write out, “I will not take your images for granted,” a few hundred times.

Also on a related note – Chris Coyier of CSS Tricks posted his experiences using different methods with CSS/CSS3 rather than JavaScript for equal heights… so that’s one to watch and play with!