search

ankidroid / Anki-Android

AnkiDroid: Anki flashcards on Android. Your secret trick to achieve superhuman information retention.
GNU General Public License v3.0
8.67k stars 2.24k forks source link

[BUG]: In black theme, <iframe> content of unstyled pages displays as black-on-black, i.e. unreadable #14547

Closed infinity0 closed 8 months ago

infinity0 commented 1 year ago

Checked for duplicates?

What are the steps to reproduce this bug?

  1. Select Black Theme in Settings.
  2. Add <iframe src="https://infinity0.github.io/mkwww/notes/index.html"></iframe> to a card.
  3. Preview the card.

Expected behaviour

  1. The text should be white and the background should be black, resulting in readable text.

Actual behaviour

  1. The text is black and the background is black, resulting in unreadable text.

Debug info

AnkiDroid Version = 2.16.5 (953b9bd879269910ee962b520da9705336d8bc2d)

Android Version = 13

ProductFlavor = full

Manufacturer = samsung

Model = SM-T970

Hardware = qcom

Webview User Agent = Mozilla/5.0 (Linux; Android 13; SM-T970 Build/TP1A.220624.014; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/117.0.0.0 Safari/537.36

ACRA UUID = 95943709-6d61-46e3-b45d-a521971ddff8

New schema = true

Scheduler = std3

Crash Reports Enabled = true

DatabaseV2 Enabled = true

(Optional) Anything else you want to share?

Previous similar issues include #1630 (closed as "invalid") and #3950 (closed as "edge case") that were last active in 2015, however I feel an empty basic web page such as the example given here is not an "edge case" but really the most common, basic, and simple case you can have.

Research

infinity0 commented 1 year ago

Looks like the webserver hosting my original link sets x-frame-options, use <iframe src="https://infinity0.github.io/mkwww/notes/index.html"></iframe> instead.

One work around is to add the following CSS, but only if you have control over the web page being iframed:

/* Work around https://github.com/ankidroid/Anki-Android/issues/14547 */
@media (prefers-color-scheme: light) {
  body {
    background-color: white;
    color: black;
  }
}
@media (prefers-color-scheme: dark) {
  body {
    background-color: black;
    color: white;
  }
}

I've applied this to https://infinity0.github.io/lcra/ which is my motivating use-case - to embed this website into my cards - but it should be unnecessary, and furthermore it's impossible unless you are the author of the website being iframed.

github-actions[bot] commented 10 months ago

Hello 👋, this issue has been opened for more than 3 months with no activity on it. If the issue is still here, please keep in mind that we need community support and help to fix it! Just comment something like still searching for solutions and if you found one, please open a pull request! You have 7 days until this gets closed automatically

david-allison commented 9 months ago

@infinity0 We've removed our night mode inversion code in 2.17, is this still a problem in the latest alpha?