css - Fixed position div causes page to be truncated in less common mobile browsers -

-

i know there many similar issues, different have encountered before, thought describe bug here, , offer solution - , ask if else has better solution or can shed light on cause of weird issue.

the bug:

in page has div in position:fixed style, in less common mobile browsers, e.g. star safari, du browser, tint browser - page loads expected, , div fixed expected, if page height greater 1500px, bottom of page truncated - complete white curtain. can still scroll bottom, it's white, 0 content. this bug not happen in more common browsers chrome, firefox, opera, safari etc..

here's screen shot phone (htc m8 - tint browser) - reproduced bug on samsung s5.

tint browser bug

there many reasons might want fixed div, in case menu button can follow viewport, visitor doesn't have scroll top menu.

i have posted semi-solution bellow, not mark correct week, else can offer better solution.

tim

the reason call "semi-solution" 2 reasons:

1) not keep div fixed, elegantly move div after scroll event.

2) while doesn't cause page truncate permanently, flash 'curtain' during opacity transitions. weird, right?

edit: should mention solution looks great in common browsers (chrom, safari etc...), flashing curtain apply browsers otherwise truncated fixed position div, although isn't pretty in less common browsers, it's still better alternative, , minor compromise in style more common browsers.

this code menu button example, adapt own needs.

html example

<body onscroll="menubutton()">     <div style="height:2000px; border: thick dotted green; width:90vw; background-color:#131313"></div>     <div id="menubutton">         <div class="image"></div>     </div> </body>

css

#menubutton {     position: absolute;     top:25px;     left: 25px;     opacity: 1;     z-index: 1001;     transition: opacity .4s ease-in-out;     -moz-transition: opacity .4s ease-in-out;     -webkit-transition: opacity .4s ease-in-out; }  .image {     width:50px;     height:50px;     background-color:red; }

javascript

function menubutton() {     settimeout(function () {         var button = document.getelementbyid("menubutton").style;         var pos = document.documentelement.scrolltop || document.body.scrolltop;         var newpos = pos + 25 + 'px'; // offset start value of div top position.         button.opacity = 0;         settimeout(function () {             button.top = newpos;                     settimeout(function () {                         button.opacity = 1;                     }, 500);         }, 500);     }, 800); }

and here jsfiddle


Comments

Post a Comment

Popular posts from this blog

javascript - Slick Slider width recalculation -

-
i'm trying add slide in panel on slick container css. carousel works except new width not being calculated when space has been added. recalibrate once advance next slide i'd happen each time panel opened or closed. i've tried adding both margin , padding, neither makes difference. ideas? https://jsfiddle.net/mhigley/dpf7mlpl/ html: <button type="button" id="button"><i class="fa fa-arrow-right"></i></button> <aside> <h2>slide in panel</h2> <ol> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ol> </aside> <main role="main"> <div class="sections"> <section> <article> <h2>first slide</h2> <p>lorem ipsum d...
Read more

jsf - PrimeFaces Datatable - What is f:facet actually doing? -

-
looking through primefaces code in app noticed following line: <f:facet name="header">#{trainsearch.traincount} trains</f:facet> it looks overriding header, makes sense, can explain me in little more detail? what happening line of code? complete code listed below: <p:datatable id = "results" value = "#{trainsearch.trains}" var = "train" rendered="#{not empty trainsearch.trains}" styleclass = "train-search-table horizontal-border"> <f:facet name="header">#{trainsearch.traincount} trains</f:facet> <p:column headertext = "train id"> <p:panelgrid columns="1" styleclass = "train-id-grid" layout = "grid"> <h:outputtext styleclass = "train-id-label" value="#{train.traini}"/> <h:outputtex...
Read more

angular2 services - Angular 2 RC 4 Http post not firing -

-
i trying fire post request app , it's not working, tried multiple ways. don't see request being fired under network tab in chrome. not sure problem is, appreciated. import { injectable } '@angular/core'; import { http, headers } '@angular/http'; @injectable() export class userservice{ private _url="users"; constructor(private _http: http){ } checkifusernameexists(username){ return this._http.get(this._url+"/"+username) .map(response => response.json()) } createuser(user){ let headers = new headers(); headers.append('content-type', 'application/json') console.log(json.stringify(user)); return this._http.post(this._url, json.stringify(user),{headers: headers}) .map(response => response.json()) } } first need capture error , solve error: this._http.post(this._url, json.stringify(user),{headers: headers}) .subscribe( ...
Read more