WEb pages getting very dark background on Samsung Tablets. Other devices and desktop OK

Some HTML5 / Bootstap web pages started getting very dark background and unreadable reported by customers. On Samsung Tablets using chrome browser.  

Multiple Samsung tablet users reported this problem starting. I don't believe it is a change on our end as they pages have not been changed. They work fine on Samsung Note 8 which I have. I don't have Samsung tablet to test. The pages are fine with  all browsers for desktop and other devices as far as I know.

Please help me understand and fix how I can adjust the html / css to fix this. Or is a plugin misbehaving? I am not sure. Sorry I am not super-technical but know enough.

Here are two examples of the pages getting the dark backround on Samsung tablets

https://www.housecarers.com/homeowner-profile.cfm?mem=2145763446

https://www.housecarers.com/housesitter-profile.cfm?mem=2145596663
Ian WhiteOwner and FounderAsked:
Who is Participating?
 
Sam WallisIt/Web ManagerCommented:
Hi Ian.

I was able to recreate the issue on a google nexus tablet.

Can you try removing the CSS rule for the background image "https://www.housecarers.com/img/right-main-bg-repeater.png"?

body.right-main #wrap {
    background: #ffffff;
}

Open in new window

0
 
Jackie ManCommented:
Ask the users to give more information as follows:

1. Model no of the tablet
2. Android OS version
3. Browser app used and the version. For example, are they using Chrome app.

Chrome app details
Goto Settings -> App Mgr and look for the browser app being used and click it to see the version number.
0
 
Ian WhiteOwner and FounderAuthor Commented:
My users are mainly retirees and not very tech savy.  One has said
"Yes Ian it was on Chrome, and on samsung. I am using a Samsung s2 tab."
I can ask them for more information. It started being reported 2-3 weeks ago and seems all to be with chrome and samsung tablet.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
Ian WhiteOwner and FounderAuthor Commented:
I will ask them if they can give this as well.
0
 
Jackie ManCommented:
I have just have a look of your CSS style sheet.

At line 622, it says:-

  background-color: #0ef0a8;
	/*
  background-position: -150px -462px;
	*/

Open in new window


Chrome cannot resolve this color and displays the background color it as black color whereas Firefox displays the background color as white color.

I am using Chrome for Desktop in Windows 7 to view your links.

The difference in Chrome app on tablet and Chrome app on a smartphone is that Chrome app on a tablet will not display a mobile view by default and will render a view similar to the Chrome for Desktop.
0
 
Ian WhiteOwner and FounderAuthor Commented:
ok thanks very much. Chrome on PC desktop is fine. So something unique about Chrome on Samsung tablet? Please advise what I should change this to to be safe on all browsers?

 background-color: #0ef0a8;
0
 
Jackie ManCommented:
If you only want a background in white colour, why not change the colour code to #FFFFFF?

https://htmlcolorcodes.com/color-chart/web-safe-color-chart/

Why you need #0ef0a8 at all? I do not see this colour in either mobile or desktop views.
0
 
Ian WhiteOwner and FounderAuthor Commented:
Yes I will. This came from original designers.  Maybe they wanted an off white?  Not sure why they chose that.  
Also I now see from Jackie Man that it goes black  work Windows 7 , Chrome but it is OK on my desktop Chrome Windows 10.
0
 
Ian WhiteOwner and FounderAuthor Commented:
It is a green according to

https://www.google.com.au/search?q=%230ef0a8&rlz=1C1CHBF_enAU732AU732&oq=%230ef0a8&aqs=chrome..69i57j35i39.1551j0j4&sourceid=chrome&ie=UTF-8

So it is not the background color of the whole page - but for some item on the page.
0
 
Ian WhiteOwner and FounderAuthor Commented:
it is button from hover.com plugin. I will tell them to change it Thanks
0
 
Ian WhiteOwner and FounderAuthor Commented:
Thanks for your efforts. Mystery solved
0
 
Ian WhiteOwner and FounderAuthor Commented:
Sorry I meant it was a color from the original designer - hover over button

verified-btn:hover {
background-image:none;
  background-color: #0ef0a8;
      /*
  background-position: -150px -462px;
      */
  border: 1px solid #2e6da4;
  color: #fff;
  cursor: pointer;
0
 
Ian WhiteOwner and FounderAuthor Commented:
Actually that explains one page.

https://www.housecarers.com/housesitter-profile.cfm?mem=2145489888

But the other page that was going dark background does not have background-color: #0ef0a8;

https://www.housecarers.com/homeowner-profile.cfm?mem=2145650811
0
 
Jackie ManCommented:
Main stylesheet
https://www.housecarers.com/css/main.css?v=2003

main cs
I have not dug deeper into your problem previously.

It seems that the main stylesheet of your website has caused a problem and it affects all pages on your website.
0
 
Ian WhiteOwner and FounderAuthor Commented:
Ok Thanks. So you are saying these two colors picked by our designers are causing chrome on some devices and desktop windows versions to result in dark backgrounds? Chrome on my windows 10 desktop is ok, but apparently not on your windows 7 desktop
0
 
Ian WhiteOwner and FounderAuthor Commented:
Could you please explain exactly what is wrong with these two lines. Thank you for your help

 */
 .homeSelectoractive{
      color: #FFF !important;
      background-color: #D9534F !important;
      border-color: #D43F3A !important;
 }

I dont know why the designers did this.  I commented out the code and it does not have impact on the website.   Do you still have dark background after my change?, as I dont have access to chrome on Windows 7 or Chrome on Samsung tablet
0
 
Ian WhiteOwner and FounderAuthor Commented:
I still dont have a proven solution.  The css you mentioned was not being referenced. I commented it out. Please see if you still see the problem as I do not have access to the computer/chrome/device where it is turning dark.

I have asked the moderator to reopen this . Thank you Ian
0
 
Jackie ManCommented:
Chrome in Win 7
0
 
Ian WhiteOwner and FounderAuthor Commented:
Thank you ok so removing that css has not been the solution. Is this chrome on Windows 7 as Chrome on Windows 10 is ok?
0
 
Ian WhiteOwner and FounderAuthor Commented:
Unfortunately the suggestions so far have not resolved the problem. Visitors still report the dark background on Chrome Samsung tablets. If they switch to firefox they are ok.  Chrome on Windows 10 desktop is fine, Though it has been reported it is dark on Windows 7 Chrome. Please help
0
 
Ian WhiteOwner and FounderAuthor Commented:
Thank you Sam for the suggestion. I removed the rule in CSS. How does it look now on your google nexus tablet? My main.css was so big and the designers have long left the design company I had the work done. I am still finding issues in the css within my limited expertise.
0
 
Sam WallisIt/Web ManagerCommented:
Hi Ian.

Sorry for the delay, but this seems to have solved your issue.

Obviously be sure to check with other devices and feedback from your customers.
0
 
Ian WhiteOwner and FounderAuthor Commented:
Thank you Sam. It works on other devices I have. I just did not have access to Chrome tablets. Thanks for the help.
1
 
Ian WhiteOwner and FounderAuthor Commented:
Thank you for the help. That solved it
1
 
Sam WallisIt/Web ManagerCommented:
Hi Ian.

No problem, glad I could help.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.