js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 04:09:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

[code-demo] Fix Safari bug with viewport emulation

Browse Source
This commit is contained in:
Lea Verou
2024-12-09 15:18:15 -05:00
parent 321f53f953
commit d5419ab0d0
3 changed files with 12 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/components/code-demo/code-demo.styles.ts
View File

@@ -5,7 +5,7 @@ export default css`
--preview-background: var(--wa-color-surface-default, canvas);
--preview-backdrop: var(--wa-color-surface-lowered, rgb(0 0 0 / 0.25));
--preview-resize: inline;
--preview-min-width: min-content;
--preview-min-width: 10em;
--preview-max-width: 100%;
--preview-padding: var(--wa-space-2xl, 2rem);
--divider-width: var(--wa-border-width-s, 1px);
@@ -39,20 +39,17 @@ export default css`
border-start-start-radius: inherit;
border-start-end-radius: inherit;
background: var(--preview-background);
resize: var(--preview-resize);
contain: inline-size; /* Safari chokes on scaled down viewports without this */
&:has(#viewport) {
background: var(--preview-backdrop);
}
&:not(:has(#viewport)) {
:host(:not([viewport])) & {
max-width: min(var(--preview-max-width), 100%);
min-width: var(--preview-min-width, min-content);
}
&:not(:has(#viewport)),
#viewport {
resize: var(--preview-resize);
min-width: var(--preview-min-width);
overflow: auto;
@container style(--preview-resize: none) {
overflow: visible;
}
}
> :first-child {

2
src/components/code-demo/code-demo.ts
View File

@@ -47,7 +47,7 @@ const URL_ATTRIBUTES = ['src', 'href'];
* @cssproperty --preview-resize - The CSS `resize` property value used for the preview. Default: `inline`, for horizontal resizing.
* @cssproperty --viewport-initial-aspect-ratio - The initial aspect ratio of the viewport, when the `viewport` attribute is used. Defaults to `16 / 9`.
* @cssproperty --preview-max-width - The maximum width of the preview. Defaults to `100%`.
* @cssproperty --preview-min-width - The minimum width of the preview. Defaults to `min-content`.
* @cssproperty --preview-min-width - The minimum width of the preview. Defaults to `4em`.
* @cssproperty --divider-width - The width of the divider. Defaults to `var(--wa-border-width-s)`.
* @cssproperty --code-collapse-duration - The duration of the code collapse animation (for supporting browsers). Defaults to `var(--wa-transition-normal)`.
*

16
src/components/viewport-demo/viewport-demo.ts
View File

@@ -131,15 +131,9 @@ export default class WaViewportDemo extends WebAwesomeElement {
@state()
private innerHeight: number = 0;
@state()
private hostHOffset: number = 0;
@state()
private iframeHOffset: number = 0;
@state()
private viewportHOffset: number = 0;
@state()
private availableWidth = 0;
@@ -199,14 +193,8 @@ export default class WaViewportDemo extends WebAwesomeElement {
this.iframeHOffset = getHorizontalOffsets(getComputedStyle(this.iframe));
}
if (this.viewportElement) {
this.viewportHOffset = getHorizontalOffsets(getComputedStyle(this.viewportElement));
}
this.hostHOffset = getHorizontalOffsets(getComputedStyle(this));
const width = this.getBoundingClientRect().width;
this.availableWidth = width - this.hostHOffset - this.viewportHOffset - this.iframeHOffset;
const width = this.viewportElement.clientWidth;
this.availableWidth = width - this.iframeHOffset;
}
}