简体   繁体   中英

Unknown white space appear on the right side of web page

Here's the look:

[ 有问题的页面 ]

I did the page in ReactJS, but I've made a copy of the page here .

To better show the white space, here's the screenshot: 图像显示空白

several interesting observations:

  • when the page is first loaded, there's no such issue.
  • the issue only appear, when the second image box (the one with 100% bar there) added into DOM
  • screen.width = 375
  • $('html').width() = 375, also
  • I don't know how and why the white space appeared, nor can I find any element having width > 375. (I didn't check through all element though)
  • $('body').find('div').each(function(idx,e){if($(e).width() > 375) console.log($(e).width())}) would give me no output
  • I try to do inspect on that white area, cannot. It would imply show me the body
  • this issue appear both on web and on mobile
  • this issue doesn't appear for the code in codepen I've shown above, although that code is an exact copy of the HTML generated (I copied directly from Chrome Inspector), with all the javascript removed

Any idea on: 1) why the white space appeared? 2) how could I solve the issue?

PS: just in case if you missed the part I put link to CodePen, Here it is again .

Update 2: I have this input box which I'm placing outside the page:

<input type="file" class="attache-upload-button" data-reactid=".0.0.1.3.1.1.0.0.1">

Corresponding style:

.review-add-form form .uploader .attache-upload-area .attache-upload-button {
  position: fixed;
  top: -1000px;
}

I inspected the DOM with chrome inspector, and i saw that the <svg class="bar"> is exceeding in width. I tried to set a overflow: hidden to the containing element, .progress-bar-circle and the whitespace disappeared

Add this to the css.

html,body {
 height: 100%;
 width: 100%;
 margin:0;
 padding:0;
 overflow-x:hidden;
}

Faced this issue multiple times and in my case its generally a div or an element that is crossing the width of the screen thus stretching out, maybe try and analyze with chrome dev tools and inspect the layout, try and get rid of few divs and see if it changes anything, or maybe reduce the width of absolutely sized elements,etc.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM