PmWiki-responsive-Talk

Summary: Talk page for PmWiki-responsive skin.
Maintainer: Petko
Users: +1 (View / Edit)

This space is for User-contributed commentary and notes. Please include your name and a date along with your comment.

PMWiki displays some content, then it has some movement. This is noticable when clicking the reload button in Firefox. I think the header is displayed, then it increases in height, and then it displays the rest. I think this is called "CSS Content Jumping". I would call it flickering. Can PMWiki be adjusted to eliminate this?

Only on a case-by-case basis, in a limited way. I can only experience something similar to what you describe when I disable in-browser caching and I severely limit the connection speed. In that case the page displays first but the logo picture takes a fraction of a second to load and indeed it may push down the bottom border of the header. All skins, including the default PmWiki skin, which has been around since PmWiki 2.0.0-beta1 for 15+ years, have this feature. Browsers first load the HTML content, almost at the same time the CSS styles and only then they load any embedded media, and not only with PmWiki but with all sites.

This can be somewhat improved when you know what are the dimensions of your logo picture, then you can define in pub/css/local.css the heights of the #wikihead element. Here is what works for me on this page with the current logo:

#wikihead {
  min-height: 34.5px;
}
@media screen and  (min-width:50em) {
  #wikihead {
    min-height: 51px;
  }
}

Note that the dimensions and styles of the search and submit fields in the header are user-system-dependent (Gnome != KDE != MacOSX != WinXP != Win10) and in my case (Firefox, LXDE/Gnome) is 34 pixels high, that is more than the 32px logo height, this is not the case for Epiphany (19px) or Chromium (18px). Also, on a mobile device a large logo may be shrunk to become both narrower and shorter, depending on the screen size of the device, so it is not very reliable to hardcode the header dimensions if you don't know all your users and their devices. --Petko May 14, 2019, at 06:53 AM


I am trying to put a nice light blue fade at the top of my pmwiki page using image

  http://gnuzoo.org/images/bluebg.gif 

and some CSS like

  background-repeat: repeat-x;
  background-position: 0px 0px;
  background-attachment: fixed;
  background-image: url('http://gnuzoo.org/images/bluebg.gif');

I want to use this great responsive skin, but I don't seem to be able to make this work. Can you please help?

Please see ResponsiveSkinBackground. --Petko May 12, 2019, at 08:28 PM

Talk page for PmWiki-responsive skin (users).