Note that there are some explanatory texts on larger screens.

plurals
  1. POWPF WebBrowser Control - position:fixed Element jumps while scrolling (Windows 8)
    primarykey
    data
    text
    <p>We use the WPF WebBrowser control to display an embedded page. On Windows 8 we observe a strange jumping behavior of elements with css position:fixed while scrolling. </p> <p><img src="https://i.stack.imgur.com/76qCv.jpg" alt="position:fixed is jumping when scrolling"></p> <p>The same page works fine in IE10 on Windows 8 (also FF, Chrome) and in the WPF WebBrowser control on Windows 7.</p> <p>Has anyone seen this behavior before and knows a fix for the jumping motion?</p> <p>Is it possible the .NET Version 4.5 used on the test machine (Surface with Win 8) be the Problem as compared to the .Net Version 4 on the dev machine?</p> <p><strong>The Development Environment:</strong></p> <ul> <li>Windows 7</li> <li>Microsoft Visual Studio 2010 Version 10.0.30319.1 RTMRel</li> <li>Microsoft .NET Framework Version 4</li> </ul> <p><strong>The Test Environment:</strong></p> <ul> <li>Surface</li> <li>Windows 8</li> <li>Microsoft .NET Framework Version 4.5</li> </ul> <p><strong>Client XAML:</strong></p> <pre><code>&lt;Window x:Class="EmbeddedBrowserTest.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="350" Width="525"&gt; &lt;Grid&gt; &lt;WebBrowser HorizontalAlignment="Stretch" Name="webBrowser" VerticalAlignment="Stretch" Grid.Row="1" /&gt; &lt;/Grid&gt; &lt;/Window&gt; </code></pre> <p><strong>Demo Page HTML:</strong></p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=9" /&gt; &lt;title&gt;minimal position fixed example&lt;/title&gt; &lt;style&gt; body { margin: 0px } .header{ height: 60px; width: 960px; background-color: #cccccc; top: 0px; left: 0px; position: fixed; z-index: 10; } .content{ padding-top: 60px; height: 420px; width: 960px; background-color: lightsteelblue; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div class="header"&gt; header &lt;/div&gt; &lt;div class="content"&gt; content &lt;br&gt; 1 &lt;br&gt; 2 &lt;br&gt; 3 &lt;br&gt; 4 &lt;br&gt; 5 &lt;br&gt; 6 &lt;br&gt; 7 &lt;br&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload