The following page jumps when one of the “Books” buttons is selected. The page seems OK using my iPad Mini but jumps when used on the Ubuntu desktop in every browser I have tried.
(https://this-is-a-test-to-see-if-it-works.tk/?)
Both W3.org HTML and CSS validation returns no errors or warnings 
Doesn’t jump for me in Eclipse or Firefox but does randomly in Chrome.
I had a similar problem years ago and can not remember how I fixed it now.
I can’t recall having ever seen question marks used for these attribute values. i.e.
...
<a href="?">
...
<form action="?" method="post">
...
Might this be invalid but not caught by the validator?
Many thanks and well spotted.
I will try tomorrow when back on the desktop. I will also try hard coding the page name and also with #.
form action=“?” isn’t invalid, but it will reload the current page and remove any query string currently on it.
I pinpointed the problem - Svg image is the problem which works on other sites but not this one? I will have to try and spot the difference 
It can now be toggled - notice how the screen does not flicker when a table of books (Dasa, /New. Gekko, ec) is selected:
https://this-is-a-test-to-see-if-it-works.tk/index.php?svg=1
https://this-is-a-test-to-see-if-it-works.tk/index.php?svg=0
<?php
// ...
$dDate = date('l, jS F Y') .' ';
$SVG2 = ''; // SET DEFAULT OFF
if( $_SESSION['svg'] ):
$SVG2 = file_get_contents( 'assets/imgs/jb_in_shorts.svg');
endif;
$result = <<< ____TMP
<div class="pof pot w99 bd3 z02" title="by: John_Betong">
<div class="fll dib jbs">
$SVG2
</div>
<i class="flr fss ooo"> $dDate </i>
<h1 class="fll">
<a href="index.php">
<span class="fga fgy"> $title </span>
</a>
</h1>
<br>
<b class="flr fss"> ver:042 </b>
<br>
<i class="flr fss"> Errors: $errorLog bytes </i>
<br class="clb">
</div>
____TMP;
Although the SVG was the problem I tried everything I know and was still unable to stop the flickering
I am delighted to say that replacing the embedded SVG file with an animated GIF solved the flickering problem
Strange that the animated GIF has a file-size of 5.5kb and about a third of the SVG file-size and the page now takes slightly longer to load
I was thinking the jumping might be because of the browser redrawing the page after the image dimensions were determined. In which case putting the SVG inside a container element with adequate dimensions should help. But then the benefit of the image being Scalable would be lessened?
The SVG was resized to fit the top heading otherwise it fills the whole screen. I played with dimensions and could not stop it from jumping.
I have uploaded another file called index-jumps.php, please feel free to try and get it not to jump.
https://this-is-a-test-to-see-if-it-works.tk/index-jumps.php
Sorry I can’t be much help. When using my iPad I saw no “jump”. Using Windows 10 I saw what I would call “repaint” instead of “jump” though that might be what you mean. Using Firefox in my Ubuntu VM guest, again I saw no “jump”.
I used different browsers in my iPad (basically all Safari) and Windows 10.
Because all browsers in Windows 10, and only in Windows 10, exhibited the repaint that’s where I experimented with different viewBox, width and height values. All I managed to come up with is messing up the display to varying degrees.
My best guess is it’s OS specific though that hypothesis is inconsistent with your experience using Ubuntu vs. mine using Ubuntu (16 LTS) in the VM.
Cracked it - I found a SitePoint page which I think was by @Chris Buckly who explained numerous ways to implement SVGs.
I tried a couple and the one that worked was using a background image. The page no longer jumps
I am in the process of adding an updated skin (because my son thinks the site should look more modern and aesthetic ).
Whoops - incorrect web-page author- it should have been Craig Buckler. No wonder I could not find the web-page.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.