asked on

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

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.

User generated image

Goto Settings -> App Mgr and look for the browser app being used and click it to see the version number.

ASKER

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.

ASKER

I will ask them if they can give this as well.

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.

ASKER

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;

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.

ASKER

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.

ASKER

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.

ASKER

it is button from hover.com plugin. I will tell them to change it Thanks

ASKER

Thanks for your efforts. Mystery solved

ASKER

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;

ASKER

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

Main stylesheet
https://www.housecarers.com/css/main.css?v=2003

User generated image

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.

ASKER

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

ASKER

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

ASKER

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

User generated image

ASKER

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?

ASKER

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

ASKER CERTIFIED SOLUTION

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

ASKER

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.

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.

ASKER

Thank you Sam. It works on other devices I have. I just did not have access to Chrome tablets. Thanks for the help.

ASKER

Thank you for the help. That solved it

Hi Ian.

No problem, glad I could help.