[TW-6448] fix(@ownmail/app): preserve transparent dark artwork - #293
Conversation
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: d0651e5adb
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: d25ed96f50
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 09816c0127
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| :host([data-color-mode="original"][data-email-theme="light"]) .email-root{background:#fff!important;color:#1a1a1a!important;} | ||
| :host([data-dark-invert]) .email-root :where(img:is([src], [srcset]), video, svg, canvas){filter:invert(1) hue-rotate(180deg)!important;background-color:#f3f4f6!important;} | ||
| :host([data-email-theme="dark"]) .email-root :where(img[src*="/email-images/"], img[srcset*="/email-images/"]){background-color:#f3f4f6!important;} | ||
| :host([data-dark-invert]) .email-root :where(img:is([src], [srcset]), video, svg, canvas){filter:invert(1) hue-rotate(180deg)!important;} |
There was a problem hiding this comment.
When an email contains an alpha-capable video or a video with a dark transparent poster, this rule counter-inverts the media to its original dark colors while the host inversion makes the message canvas black. Unlike img, video is neither pixel-sampled nor covered by the retained svg, canvas backing, so the poster or transparent frames can become effectively invisible. Retain a scoped backing for video or extend the conditional inspection to its poster and frames.
Useful? React with 👍 / 👎.
| private readonly handleMediaSettled = (event: Event): void => { | ||
| if (event.target instanceof HTMLImageElement) { | ||
| const image = event.target | ||
| if (event.type === 'load') updateDarkImageBacking(image, this.darkImageBackingEnabled()) |
There was a problem hiding this comment.
For an animated GIF, WebP, or APNG whose initial frame is light or opaque but a later frame is dark and transparent, this samples only the frame shown when load fires; frame advances do not emit additional load events, so the backing attribute remains absent and later artwork can disappear against the black canvas. Fresh evidence in the final code is that updateDarkImageBacking is invoked only from this one-time load handler. Animated formats need a conservative backing or frame-aware re-evaluation.
Useful? React with 👍 / 👎.
2 participants
Summary
Validation
Jira: TW-6448
Epic: TW-5882