<!DOCTYPE html> <html> <head> <title>Bug 1121748-1</title> <meta charset=utf-8> <style> html { width: 25%; } ul { margin: 0; padding: 0; border: 1px solid green; } ul li { position: relative; margin: 2px 10px; background: #eee; display: block; } ul li[hidden] { display: none; } </style> <script> function test() { document.body.dir = 'rtl'; document.querySelector('#test').offsetHeight; document.querySelector('#test').hidden = false; } </script> </head> <body onload="test()"> <ul> <li id="test" hidden> item #1 </li> <li> item #2 </li> <li> item #3 </li> </ul> </body> </html>