Vivaldi renders page incorrectly at startup



  • I'm not sure if this is a bug, but this code works with no problems on Chrome.

    This page will load correctly if you load it via the File menu. If you try to load it by double clicking the html file or set it as your start page, the text at the top will not display and will never display unless you clear the cache. The only way to get this code to work at startup is to remove "height: 100%" from css, or "autofocus" from the text input field. Having both of those seems to break this page on Vivaldi.

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Test</title>
    <style>
    @import url(http://fonts.googleapis.com/css?family=Varela+Round);
    
    html { box-sizing: border-box; }
    
    *,
    *:before,
    *:after { box-sizing: inherit; }
    
    html {
      background: #181818;
      overflow-y: scroll;
      height: 100%
    }
    
    body {
      font: 1em/1.6 "Varela Round", Arial, sans-serif;
      color: #999;
      font-weight: 400;
      
      padding: 1em;
      margin: 0 auto 10% auto;
      height: 100%
    }
    
    .icon {
      display: block;
      position: relative;
      width: 1.5em;
      height: 1.5em;
      margin: 0 auto;
    }
    
    .icon:before,
    .icon:after {
      content: "";
      position: absolute;
    }
    
    .dropp {
      max-width: 25em;
      box-shadow: 0 1px 3px #0a0a0a;
    }
    
    .dropp-header {
      background: #242424;
      color: #fff;
      border-bottom: 2px solid #dd4040;
      -webkit-box-align: stretch;
      -moz-box-align: stretch;
      box-align: stretch;
      -webkit-align-items: stretch;
      -moz-align-items: stretch;
      -ms-align-items: stretch;
      -o-align-items: stretch;
      align-items: stretch;
      -ms-flex-align: stretch;
      display: -webkit-box;
      display: -moz-box;
      display: box;
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: horizontal;
      -moz-box-orient: horizontal;
      box-orient: horizontal;
      -webkit-box-direction: normal;
      -moz-box-direction: normal;
      box-direction: normal;
      -webkit-flex-direction: row;
      -moz-flex-direction: row;
      flex-direction: row;
      -ms-flex-direction: row;
      -webkit-box-pack: start;
      -moz-box-pack: start;
      box-pack: start;
      -webkit-justify-content: flex-start;
      -moz-justify-content: flex-start;
      -ms-justify-content: flex-start;
      -o-justify-content: flex-start;
      justify-content: flex-start;
      -ms-flex-pack: start;
    }
    
    .dropp-header__title {
      display: block;
      padding: 0.8em 0.5em;
      -webkit-box-flex: 8;
      -moz-box-flex: 8;
      box-flex: 8;
      -webkit-flex: 8;
      -moz-flex: 8;
      -ms-flex: 8;
      flex: 8;
      display: inline-block;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      word-wrap: normal;
    }
    
    .dropp-header__btn {
      display: block;
      background: #1c1c1c;
      color: #fff;
      padding: 0.8em 0.5em;
      -webkit-box-flex: 1;
      -moz-box-flex: 1;
      box-flex: 1;
      -webkit-flex: 1;
      -moz-flex: 1;
      -ms-flex: 1;
      flex: 1;
      -webkit-transition: all 0.3s ease-in-out;
      -moz-transition: all 0.3s ease-in-out;
      transition: all 0.3s ease-in-out;
    }
    
    .dropp-header__btn .icon {
      -webkit-transform: rotate(-90deg);
      -moz-transform: rotate(-90deg);
      -ms-transform: rotate(-90deg);
      -o-transform: rotate(-90deg);
      transform: rotate(-90deg);
    }
    
    .dropp-header__btn .icon:before,
    .dropp-header__btn .icon:after {
      top: 30%;
      left: 25%;
      width: 50%;
      height: 15%;
      background: #dd4040;
      -webkit-transform: rotate(-45deg);
      -moz-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
      -o-transform: rotate(-45deg);
      transform: rotate(-45deg);
    }
    
    .dropp-header__btn .icon:after {
      top: 55%;
      -webkit-transform: rotate(45deg);
      -moz-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      -o-transform: rotate(45deg);
      transform: rotate(45deg);
    }
    
    .dropp-header__btn.js-open { background: #dd4040; }
    
    .dropp-header__btn.js-open .icon {
      -webkit-transform: rotate(90deg);
      -moz-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
      -o-transform: rotate(90deg);
      transform: rotate(90deg);
    }
    
    .dropp-header__btn.js-open .icon:before,
    .dropp-header__btn.js-open .icon:after { background: #fff; }
    
    .dropp-header__btn:focus { outline: none; }
    
    .dropp-body {
      overflow: hidden;
      width: 100%;
      max-height: 0;
      background: #292929;
      color: #fff;
      -webkit-transition: all 0.3s ease-in-out;
      -moz-transition: all 0.3s ease-in-out;
      transition: all 0.3s ease-in-out;
    }
    
    .dropp-body.js-open { max-height: 20em; }
    
    .dropp-body label {
      display: block;
      font-size: 0.875em;
      color: #fff;
      text-decoration: none;
      padding: 1em 0.5em;
      font-weight: 400;
      box-shadow: 0 -1px 0 #171717, inset 0 1px 0 #313131;
      cursor: pointer;
    }
    
    .dropp-body label:first-child { box-shadow: none; }
    
    .dropp-body label:hover,
    .dropp-body label.js-open { background: #dd4040; }
    
    .dropp-body label > input { display: none; }
    </style>
    </head>
    
    <body>
    
    <br><br>
    <center>
    <font style="font-size: 75px">Test</font>
    <br><br>
    
    <form><input type="text" autofocus></form>
    <p>
    <div class="dropp">
      <div class="dropp-header"> <span class="dropp-header__title js-value">Choose an option</span> <a href="#" class="dropp-header__btn js-dropp-action"><i class="icon"></i></a> </div>
      <div class="dropp-body">
        <label for="optA">Option A
          <input type="radio" id="optA" name="dropp" value="Option A"/>
        </label>
        <label for="optB">Option B
          <input type="radio" id="optB" name="dropp" value="Option B"/>
        </label>
        <label for="optC">Option C
          <input type="radio" id="optC" name="dropp" value="Option C"/>
        </label>
        <label for="optD">Option D
          <input type="radio" id="optD" name="dropp" value="Option D"/>
        </label>
      </div>
    </div>
    <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script> 
    <script>
    $(document).ready(function() {
    
      // Default dropdown action to show/hide dropdown content
      $('.js-dropp-action').click(function(e) {
        e.preventDefault();
        $(this).toggleClass('js-open');
        $(this).parent().next('.dropp-body').toggleClass('js-open');
      });
    
      // Using as fake input select dropdown
      $('label').click(function() {
        $(this).addClass('js-open').siblings().removeClass('js-open');
        $('.dropp-body,.js-dropp-action').removeClass('js-open');
      });
      // get the value of checked input radio and display as dropp title
      $('input[name="dropp"]').change(function() {
        var value = $("input[name='dropp']:checked").val();
        $('.js-value').text(value);
      });
    
    });
    </script>
    <center>
    </body>
    </html>
    

    In the meantime, does anyone know a workaround? I'm using a variation of this as my homepage and I need both attributes.



  • Well, if you want this as a new tab page, you should input the path to the file in vivaldi://settings/tabs/.

    Anyway, it works when I open the html file directly with Vivaldi, or if I double click it outside Vivaldi, or if I set it as new tab page. Don't really know where your problem is. Don't think it's a Vivaldi bug.



  • @luetage

    Was Vivaldi closed when you double clicked the file? Were you able to see "Test" in a large font above the text input?

    This works for me as a new tab page (because Vivaldi is already running), but I can't use it as a home page because it won't display correctly after Vivaldi finishes loading.

    I'm using Vivaldi 1.14.1077.55 (64 bit) on Windows 7.



  • Set it to startup with a specific page instead of homepage and add the path to the file. Also make sure you got the correct path, copy it into the field – Vivaldi has problems with edits to the path and will do strange stuff, if you try to mess with it.



  • @luetage said in Vivaldi renders page incorrectly at startup:

    Set it to startup with a specific page instead of homepage and add the path to the file. Also make sure you got the correct path, copy it into the field – Vivaldi has problems with edits to the path and will do strange stuff, if you try to mess with it.

    You lost me. This page (with additional content) is my homepage. It's a local file on my PC. It loads fine when I click the Home button. It does not load correctly when I launch Vivaldi.

    Edit: Ok. I tried entering the path as "Specific Page" in Startup settings. I still have the same issue. The only workaround I've found is using a redirect as my homepage startup page. That way, Vivaldi can fully load before my homepage does.



  • @ovalseven It's strange in any case, you load third party fonts and the whole jquery library for basically nothing. Moreover you are using many css commands that do nothing in Vivaldi. I would start by writing the code anew and heavily simplifying it, then check if it works.



  • @luetage

    Sure. It's more code than I needed but I don't have the skill to code anything that nice myself. I found this and downloaded the script so I wasn't linking to their server, thew in some old-school html and made it my start page.


 

Looks like your connection to Vivaldi Forum was lost, please wait while we try to reconnect.