0

I have scoured the web for simple ways to make a progress bar on a website that is consistent across all browsers. I have achieved this for PCs by using elements instead of the progress element and thought all was well until I looked at the website on my android phone using chrome browser app.

It would appear that Chrome for Android does not support this code?! Can someone point me in the right direction to get this to appear correctly?

#percent {
  background-color: black;
  border-radius: 10px;
  padding: 3px;
  color: yellow;
  height: 38px;
}

#inner {
  background-color: white;
  border-radius: 8px;
  height: 100%;
  width: 100%;
  float: right;
}

#bar {
  background-color: cyan;
  border-radius: 8px;
  text-align: center;
  line-height: 38px;
  color: blue;
  height: 100%;
  float: left;
}
<br><br><br>
<div id='percent'>
  <div id='inner'>
    <div style='width: 63%;' id='bar'><b>63% Full (1354.3 GiB Free)</b></div>
  </div>
</div>
Andrzej Ziółek
  • 2,241
  • 1
  • 13
  • 21
David Headrick
  • 39
  • 1
  • 6

1 Answers1

0

I tested the code using the (desktop) chrome device emulator and it runs fine on all sorts of devices. This does, however, not emulate the chrome app for android or IOS, but the aspect ratio of the device does not influence if the nested <div> renders or not.

I hope this gives you some insight into your problem.

P.S. Did you check if your chrome version is up-to-date? It might run an outdated version of html/css

Robbin
  • 184
  • 2
  • 15
  • I am using the most recent app from the Google Play store. Chrome 64.0.3282.137 on Android 6.0.1. – David Headrick Feb 28 '18 at 18:29
  • If I surf to this site with Chrome for Android and "Run code snippet" it appears correctly. Does that indicate anything? – David Headrick Feb 28 '18 at 18:35
  • Another interesting observation is that the code above works very well with Chromium but not Chrome (I thought they were mostly the same). – David Headrick Feb 28 '18 at 21:42
  • That how I tested it too (running the snippet). Ill try and run it locally and see if that influences anything. SO might have set up some stuff in the background that makes the snippet run differently on some devices – Robbin Mar 04 '18 at 11:19
  • It looks fine, even on android + chrome. – Robbin Mar 04 '18 at 11:27
  • Just rereading your question, are you sure there isn't a different 'bug' in your program? Maybe something with positioning, so the percentage-bar maybe renders off-screen? – Robbin Mar 04 '18 at 11:28
  • For some reason the problem fixed itself and displays correctly on my phone today. Maybe it was a problem with caching the website. – David Headrick Mar 05 '18 at 20:16
  • Chrome might have cached a previous version, and later updated the cached page. That would be my only explanation :( – Robbin Mar 08 '18 at 09:58
  • That must have been it. To prevent this problem while working on css/stie changes, I've implemented this trick: – David Headrick Mar 09 '18 at 14:03
  • One thing to note: While the trick just aboce prevents caching of the main page that calls the css file. The browser sometimes caches the actual style.css file. – David Headrick Apr 19 '18 at 16:44